<template>
    <div>
        <h1>员活动管理</h1>
        <div>
            <tr>
                <td>活动标题</td>
                <td>
                    <input type="text" v-model="info.title">
                </td>
                    <td align="right">分类</td>
                    <td>
                        <select v-model="info.did">
                            <option value="">请选择</option>
                            <option :value="item.Did" v-for="item in getdeus">{{ item.Dname }}</option>
                        </select>
                    </td>
                    <td>
                        <input type="button" value="查询" class="btn btn-info" @click="gethos">
                    </td>
            </tr>
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>编号</td>
                    <td>标题</td>
                    <td>分类</td>
                    <td>图片</td>
                    <td>日期</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.res":key="item.Hid">
                    <td>{{ item.Hid }}</td>
                    <td>{{ item.Htitle }}</td>
                    <td>{{ item.Did }}</td>
                    <td>
                        <img :src="item.ImgUrl" width="100" height="100">
                    </td>
                    <td>{{ item.Hdate.substring(0,10) }}</td>
                    <td>{{ item.Hstate?"已完成":"未完成" }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-info" @click="UpdateHos(item.Hid)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共{{ data.totalCount }}条</span>
        <span>每页{{ info.pageSize }}条</span>
        <span>当前{{ info.pageIndex }}/{{ data.totalPage }}页</span>
        
        <input type="button" value="首页" @click="goPage(1)">
        <input type="button" value="上一页" @click="goPage(info.pageIndex-1)">
        <input type="button" :value="item" v-for="item in data.totalPage" @click="goPage(item)">
        <input type="button" value="下一页" @click="goPage(info.pageIndex+1)">
        <input type="button" value="尾页" @click="goPage(data.totalPage)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios'
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const route = useRoute();

const goPage=(num:any)=>{
    if(num<1)
{
    num = 1;
    return;
}
else if(num>data.totalPage)
{
    num = data.totalPage;
    return;
}
info.pageIndex = num;
gethos();
}

let info:any=reactive({
    pageIndex:1,
    pageSize:2,
    title:"",
    did:""
})

let data:any=reactive({
    res:[],
    totalCount:"",
    totalPage:""
})

const UpdateHos=(Hid:any)=>{
    router.push({
        path:"/UpdateHose",
        query:{
            id:Hid
        }
    })
}

onMounted(()=>{
    gethos();
    GetTypeXl();
})
let getdeus:any=ref([]);

const GetTypeXl=()=>{
    axios({
        url:"/api/Use/GetDeus",
        method:"get"
    })
    .then((res)=>{
        console.log(res);
        getdeus.value = res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

const gethos=()=>{
    axios({
        url:"/api/Use/GetHuo",
        method:"get",
        params:info
    })
    .then((res)=>{
        console.log(res);
        Object.assign(data,res.data);
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>